const api = "http://backend.cloudgather.com.cn";
const md = markdownit();
const index = location.hash ? location.hash.substring(1) : 0;

/**news***********************/
function News() {
  this.index = index;
  this.navBindEvent();
}

News.prototype = {
  navBindEvent: function () {
    const _this = this;
    $("#nav li")
      .click(function () {
        if ($(this).hasClass("active")) {
          return false;
        }
        const a = $(this).find("a");
        const title = a.data("title");
        const id = a.data("id");
        $(this).addClass("active").siblings().removeClass("active");
        _this.render({
          title,
          id
        });
      })
      .eq(_this.index)
      .trigger("click");
  },
  render({
    title,
    id
  }) {
    const _this = this;
    $.ajax({
      url: `${api}/${id}`,
      success: function (data) {
        let html = `<section class="tab-pane">
        <h3 class="ctlc-title">${title}</h3>
        <ul class="nav nav-list">`;
        data.forEach((item) => {
          html += `<li data-url="${id}/${item.id}"><a class="details">${
            item.title
          }<span>${item.created_at.substring(0, 10)}</span></a></li>`;
        });
        `</ul>
      </section>`;
        $("#detail-content").hide();
        $("#tab-content").show();
        $("#tab-content").html(html).find(".tab-pane").fadeIn();
        _this.detailBindEvent();
        _this.renderPage();
      },
    });
  },
  renderPage(){

  },
  detailBindEvent: function () {
    const _this = this;
    $("#tab-content li").on("click", function () {
      const url = $(this).data("url");
      $.ajax({
        url: `${api}/${url}`,
        success: function (data) {
          $("#tab-content").hide();

          $("#detail-content")
            .html(
              `<section class="tab-pane" style="display: block;">
              <h3 class="ctlc-title">${data.title}</h3>
              ${md.render(`${data.detail}`)}
              <button id="back" class="btn btn-default">返回</button>
          </section>`
            )
            .fadeIn();
          $("#detail-content img").each((index, item) => {
            $(item).attr("src", api + $(item).attr("src"));
          });

          _this.bindBack();
        },
      });
    });
  },
  bindBack: function () {
    console.log(1233);
    $("#back").on("click", function () {
      console.log(1233);
      $("#detail-content").hide();
      $("#tab-content").fadeIn();
    });
  },
};

/**product***********************/
function Product(types) {
  this.index = index;
  this.types = types;
  this.types && this.render();
}

Product.prototype = {
  render: function () {
    const _this = this;
    $.ajax({
      url: `${api}/${_this.types}`,
      success: function (data) {
        let navHtml = "";
        let contentHtml = "";
        data.forEach((item) => {
          navHtml += `<li><a href="javascript:;" class="ellipsis">${item.title}</a></li>`;
          contentHtml += `<section class="tab-pane">
            <h3 class="ctlc-title">${item.title}</h3>
            ${md.render(`${item.detail}`)}
          </section>`;
        });
        $("#nav").html(navHtml);
        $("#tab-content").html(contentHtml);
        $("#tab-content img").each((index, item) => {
          $(item).attr("src", api + $(item).attr("src"));
        });
        _this.bindEvent();
      },
    });
  },
  bindEvent: function () {
    $("#nav li")
      .click(function () {
        const index = $(this).index();
        $(this).addClass("active").siblings().removeClass("active");
        $("#tab-content .tab-pane").hide().eq(index).fadeIn();
      })
      .eq(this.index)
      .trigger("click");
  },
};

/**case**************************/
function Case(types) {
  this.types = types;
  this.types && this.render();
}
Case.prototype = new Product();




/**about**************************/
function About() {
  this.index = index;
  this.render();
  // this.bindEvent();
}

About.prototype = {
  render: function () {
    const _this = this;
    $.ajax({
      url: `${api}/abouts`,
      success: function (data) {
        let navHtml = "";
        let contentHtml = "";
        data.forEach((item, index) => {
          let id = '';
          switch(item.title){
            case '合作伙伴':
              id = 'partner'
              break;
            case '联系我们':
              id = 'contact'
              break;
            default:
              id = new Date().getTime() + index;
              break;
          }
          navHtml += `<li><a href="javascript:;" class="ellipsis">${item.title}</a></li>`;
          contentHtml += `<section id="${id}" class="tab-pane">
            <h3 class="ctlc-title">${item.title}</h3>
            ${md.render(`${item.detail}`)}
          </section>`;
        });
        $("#nav").html(navHtml);
        $("#tab-content").html(contentHtml);
        $("#tab-content img").each((index, item) => {
          $(item).attr("src", api + $(item).attr("src"));
        });
        _this.bindEvent();
      },
    });
  },
  bindEvent: function () {
    const _this = this;
    $("#nav li")
      .click(function () {
        const index = $(this).index();
        $(this).addClass("active").siblings().removeClass("active");
        $("#tab-content .tab-pane").hide().eq(index).fadeIn();
      })
      .eq(_this.index)
      .trigger("click");
    window.addEventListener("hashchange", function () {
      const index = location.hash ? location.hash.substring(1) : 0;
      $("#nav li").eq(index).trigger("click");
    });
  },
};